<template>
    <div class="box-hotel" id="1">

        <head-go ></head-go>

        <div class="hotel-area">
            <div class="area-day">
                <el-select v-model="value" placeholder="请输入城市" class="choice-city">
                    <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-option-group>
                </el-select>
                <div class="block">
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>
                <div class="search">
                    <el-input placeholder="搜索一下" v-model="input">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div class="more">
                    <span style="color: #007bff">1000+</span><span>家酒店总有符合条件的</span>
                </div>
            </div>

            <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="星级" name="1" class="itemchoice">
                    <div class="choice-grade">
                        <el-checkbox-group v-model="checkList" >
                            <ul>
                                <li><el-checkbox v-for="grate in grates" :label="grate" :key="grate"></el-checkbox></li>
                                <li class="choice-place"><el-checkbox label="请勾选" disabled></el-checkbox></li>
                            </ul>
                        </el-checkbox-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="类型" name="2" class="itemchoice">
                    <div class="choice-grade">
                        <el-checkbox-group v-model="checkList" >
                            <ul>
                                <li><el-checkbox v-for="type in types" :label="type" :key="type"></el-checkbox></li>
                                <li class="choice-place"><el-checkbox label="请勾选" disabled></el-checkbox></li>
                            </ul>
                        </el-checkbox-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="品牌" name="3" class="itemchoice">
                    <div class="choice-grade">
                        <el-checkbox-group v-model="checkList" class="box-choice">
                            <ul>
                                <li><el-checkbox v-for="brand in brands" :label="brand" :key="brand" class="li-item"></el-checkbox></li>
                                <li class="choice-place"><el-checkbox label="请勾选" disabled></el-checkbox></li>
                            </ul>
                        </el-checkbox-group>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div class="hot-hotel">
            <el-tabs v-model="activeName1" type="card">
                <el-tab-pane label="智能推荐" name="first">
                    <div class="smart-hotel" v-for="(item,index) in smartHotel" :key="index" @click="goUrlHotelpage(index)">
                        <img :src="require('@/'+item.img)" height="210" width="270"/>
                        <p class="hotel-name">{{item.name}}</p>
                        <p class="score-dis"><span class="score">{{item.score}}</span><span class="score1">分</span><span class="discuss">{{item.discuss}}条评论</span></p>
                        <p class="address">{{item.address}}</p>
                        <div class="price"><span >￥</span><span class="price1">2345</span></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="好评优先" name="second">
                    <div class="smart-hotel" v-for="(item,index) in smartHotel" :key="index" @click="goUrlHotelpage(index)">
                        <img :src="require('@/'+item.img)" height="210" width="270"/>
                        <p class="hotel-name">{{item.name}}</p>
                        <p class="score-dis"><span class="score">{{item.score}}</span><span class="score1">分</span><span class="discuss">{{item.discuss}}条评论</span></p>
                        <p class="address">{{item.address}}</p>
                        <div class="price"><span >￥</span><span class="price1">2345</span></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="notice">
            <h3>疫情出行必备：</h3>
            <p><span>1.口罩</span><span>   佩戴之后，就能够防范吸入飞沫，降低被感染的几率。需要注意的是，口罩必须符合国家标准，且需要及时更换，否则就无法起到防护效果。</span></p>
            <p><span>2.免洗手消毒液</span><span>   能够在手接触公共物品或被污染后，及时进行消毒。</span></p>
            <p><span>3.纸巾</span><span>   打喷嚏的时候，用纸巾捂住口鼻，避免打喷嚏的飞沫溅出，影响他人的健康。</span></p>
            <p><span>4.消毒湿巾</span><span>   对随身携带的物品，手部，大家接触到的某些公共物品进行擦拭消毒，能够防范沾染上病毒。</span></p>
        </div>
        <back-head></back-head>
    </div>
</template>

<script>
    import HeadGo from "@/components/HeadGo";
    import HotelData from '@/assets/data/hotelsPage.json';
    import BackHead from "@/components/BackHead";
    export default {
        name: "hotelView",
        components: {HeadGo, BackHead},
        data() {
            return {
                brands: HotelData.brands,
                smartHotel: HotelData.smarthotels,
                priorityHotel: HotelData.priorityHotels,

                options: [{
                    label: '热门城市',
                    options: [
                        {value: 'Shanghai', label: '上海'},
                        {value: 'Beijing', label: '北京'}
                    ]
                }, {
                    label: '城市名',
                    options: [
                        {value: 'Chengdu', label: '成都'},
                        {value: 'Shenzhen', label: '深圳'},
                        {value: 'Guangzhou', label: '广州'},
                        {value: 'Dalian', label: '大连'}
                    ]
                }],
                value: '',
                value1: '',
                grates: ['经济型', '舒适/三星', '高档/四星', '豪华/五星'],
                types: ['经济型酒店', '主题型酒店', '商务酒店', '公寓', '豪华酒店', '客栈', '青年旅舍', '度假酒店', '别墅', '农家院'],
                checkList: ['请勾选'],
                activeName: '1',
                activeName1: 'first',
                input: '',
                index: 2,
            }
        },

        methods: {
            goUrlHotelpage(hotel_id) {
                this.$router.push({
                    path: `/hotelpage/${hotel_id}`
                })
            },
        }
    }
</script>

<style scoped>
    .box-hotel{
        height: 250vh;
        background: #f8f8f8;
    }
    .hotel-area{
        width: 1250px;
        height: 360px;
        margin: 25px auto;
        background: white;
        border-radius:10px ;
    }
    .hotel-name{
        /*border: 1px solid black;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area-day{
        height: 60px;
        background: #ebebeb;
        border-radius:10px 10px 0 0;
    }
    .choice-city{
        margin:10px 0 0 40px;
        /*border: 1px solid black;*/
    }
    .block{
       /* border: 1px solid black;*/
        width: 350px;
        margin-top: -40px;
        margin-left: 320px;
    }
    .search{
    //border:1px solid black  ;
        width: 300px;
        margin-top: -40px;
        margin-left: 730px;
    }
    .itemchoice{
    //border: 1px solid black;
        width: 1150px;
        height: 80px;
        margin: 0 auto;
    }
    .itemchoice ul{
        display: flex;
    }
    .li-item{
        flex:1;
    //border: 1px solid black;
        width: 105px;
        text-align: left;
    }
    .itemchoice li{
        display: inline;

    }
    .choice-place{
        margin-left: 30px;
    }
    /deep/ .el-collapse-item__header{
        font-size: 18px;
    //border: 1px solid black;
        width: 150px;
        font-weight: bold;
    }
    /deep/ .el-collapse-item__header:hover{
        color: #007bff;
    }
    .more{
        float: right;
        margin-top: -30px;
        margin-right: 20px;
        font-size: 14px;
    }

    .hot-hotel{
        background: white;
        width: 920px;
        height: 1200px;
        margin-left: 135px;
        margin-top: 80px;
        display: flex;
    }
    .notice{
        width: 270px;
        height: 360px;
        border: 1px solid #007bff;
        margin-top: -1100px;
        margin-left: 1100px;
        text-align: left;
        padding: 10px;
        background: white;
        border-radius: 5px;
        box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }
    .notice h3{
        /*border: 1px solid black;*/
        width: 160px;
        height: 40px;
        line-height: 40px;
    }
    .notice span{
        display: block;
        font-size: 14px;
       /* border: 1px solid black;*/
    }
    .notice span:first-of-type{
        font-weight: bold;
    }
    .smart-hotel{
        height: 360px;
        width: 270px;
        display: inline-block;
        flex:1;
        margin: 10px;
        border-radius: 10px;
        text-align: left;
    }
    .smart-hotel:hover{
        box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }
    .smart-hotel img{
        border-radius: 10px ;
    }
    .smart-hotel p:first-of-type{
        font-size: 20px;
        /*border: 1px solid black;*/
        margin: 15px 0 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .smart-hotel .score{
        font-size: 20px;
        color: #0085d0;
        margin-left: 10px;
    }
    .smart-hotel .score1{
        color: #0085d0;
    }
    .smart-hotel .discuss{
        color: gray;
        margin-left: 50px;
    }
    .smart-hotel .address{
        color: gray;
        margin-left: 10px;
        margin-top: -5px;
    }
    .smart-hotel .price{
       /* margin-top: -20px;*/
        color: #ff714a;
        margin-left: 160px;
    }
    .smart-hotel .price1{
        color: #ff714a;
        font-size: 24px;
    }
    .score-dis{
        margin: 10px 0;
    }
</style>